<app-nav> </app-nav>
<app-spinner
  *ngIf="isRequesting"
  [delay]="300"
  [message]="'Minting Private Token'"
  [isRunning]="isRequesting"
></app-spinner>
<div class="container ">
  <div class="">
    <div class="col-md-12">
      <nav class="mt-4" aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a [routerLink]="['/overview']">Overview</a>
          </li>
          <li class="breadcrumb-item active" aria-current="page">Transfer {{ nftName }}</li>
        </ol>
      </nav>

      <div class="box">
        <div class="box-header">
          <h3>Transfer {{ nftName }}</h3>
        </div>
        <div class="box-body">
          <div class=" row form-group">
            <div class="col-sm-12">
              <label for="publicKey">Select Token Id</label>
              <ng-select
                #select
                [items]="tokenList"
                class="custom"
                [virtualScroll]="true"
                [loading]="loading"
                [multiple]="true"
                [(ngModel)]="selectedTokenList"
                [maxSelectedItems]="1"
                [searchFn]="customSearchFn"
                placeholder="Select Token Id"
                style="width:45%;"
              >
                <ng-template ng-label-tmp let-item="item">
                  <span aria-hidden="true" class="ng-value-icon left" (click)="onRemove(item)"
                    >×</span
                  >
                  <b>{{ item.tokenUri }} </b> ({{ item.tokenId.slice(0, 20) }}...)&nbsp;
                </ng-template>
                <ng-template ng-option-tmp let-item="item" let-index="index">
                  <b>{{ item.tokenUri }}</b> ({{ item.tokenId.slice(0, 20) }}...)
                </ng-template>
              </ng-select>
            </div>
          </div>
          <div class=" row form-group">
            <div class="col-sm-12">
              <label for="publicKey">Select A Receiver</label>
              <select
                class="form-control text-box"
                id="publicKey"
                name="sellist1"
                [(ngModel)]="receiverName"
                required
              >
                <option [ngValue]="undefined" selected>Select </option>
                <option *ngFor="let user of users" value="{{ user }}">{{ user }}</option>
              </select>
            </div>
          </div>
          <div class="col-md-12">
            <div class="row">
              <button
                class="btn btn-md btn-primary"
                [disabled]="!selectedTokenList || !receiverName"
                type="button"
                (click)="transferToken()"
              >
                Transfer {{ nftName }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
